|
|
XPages アプリケーション開発を助けるデバッグの方法について解説します。
|
ShowTable of Contents
サンプルアプリケーションの作成 XPage 「sample.xsp」 の作成 1) 「パネル」コントロールの配置
2) 「ボタン」コントロールの配置
名前： getNameBtn ラベル： 名前取得
イベント： onClick()  ①「onclick」をクリックする ②「クライアント」タブを選択する ③「アクションの追加」ボタンをクリックする  ①以下のソースコードを記述する ②「OK」ボタンをクリックする
var uName1=window.document.getElementById("#{id:label1}").textContent;
var uName2=window.document.getElementById("#{id:label2}").textContent;
var uName3=window.document.getElementById("#{id:label3}").textContent;
var txt="1: "+uName1+" 2: "+uName2+" 3: "+uName3;
alert(txt);
3) 「ラベル」コントロールの配置 名前：label1
ラベル：山田 太郎
4) 「ラベル」コントロールの配置 名前：label2
ラベル：山田 次郎
5) 「ラベル」コントロールの配置 名前：label3
ラベル：山田 三郎
Webブラウザで確認 1) 以下の画面が表示されること  2) 「名前取得」ボタンをクリックすると、メッセージボックスが表示されること 事前準備 1) 「Firebug」アドオンが追加されているか、「マーク」を確認する  2) 「Firebug」を起動する ①Firebugのマークをクリックする
②Firebug画面が表示されることを確認する
1) ブレーク ポイントを設定する
 ① JavaScriptを表示するために「スクリプト」タブをクリックする②スクリプトが記載されている「sample.xsp」を選択する
③「１．１． 2)」で入力したコードが表示されていることを確認する
④ブレークポイントを設定したい行の左側をクリックする ⑤クリックした行に「●」が表示されることを確認する 2) 「名前取得」ボタンをクリックしてスクリプトを実行します。  ①「名前取得」ボタンをクリックする ②ブレークポイントで処理が停止し、マークが表示されることを確認する 3) ステップ実行し、変数に値が設定されることを確認する
 ①ステップインをクリックする ②次の一行に処理が移動することを確認する ③「uName1」変数に値が設定されることを確認する
No | アドオンツール | 概要 | 備考 |
１ | FireCookie | Cookieの内容を表示する |
|
２ | Inline Code Finder | HTML内にインラインで埋め込まれたスタイルシートやイベント処理、JavaScriptを可視化する |
|
３ | FireRainbow | JavaScriptをハイライティングする |
|
４ | CodeBurner | HTMLタグ（要素）のヘルプ機能を追加する |
|
５ | FireQuery | JavaScriptフレームワークのスタンダード的な存在であるjQueryを利用しているWebアプリケーションのデバッグを支援する |
|
６ | FireFinder | XPathを利用したHTMLタグの検索結果を表示する |
|
７ | YSlow | Webサイトの表示速度を計測して問題点を表示する |
|
8 | FireScope | HTML,CSSのリファレンスを追加する |
|
9 | FirePalette | FirebugのCSSパネルにカラーピッカーを追加する |
|
10 | Pixel Perfect | 指定した画像をウェブページに重ねて表示する |
|
リンク集
・「Firefox 3とFirebugで始めるJavaScript開発」
http://gihyo.jp/dev/feature/01/firebug
・「意外と知られていない機能が多い！？Firebugの使い方」
http://h2ham.seesaa.net/article/154387441.html
・「notes/domino liaison」ブログ
http://notesdominoliaison.blogspot.com/2009/12/xpages-http.html
・「Notesサポートのつぶやき」ブログ
http://hnagasim.blog8.fc2.com/?tag=xpages |